<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>产品管理</span>
      </div>
    </template>
    <div style="width: 100%">
      <el-table :data="tableData">
        <el-table-column prop="title" label="产品名称" />
        <el-table-column prop="introduction" label="产品描述" />
        <el-table-column label="更新时间">
          <template #default="scope">
            <span class="font">{{ editTime(scope.row.editTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="right" label="操作">
          <template #default="scope">
            <el-button
              type="warning"
              @click="Bottom1(scope.row)"
              :icon="Search"
              circle
            />
            <el-button
              type="primary"
              @click="EditBottom(scope.row)"
              :icon="Edit"
              circle
            />
            <el-button
              type="danger"
              @click="ProductDelete(scope.row)"
              :icon="Delete"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    title="产品预览"
    :width="Width + '%'"
    :before-close="handleClose"
  >
    <div>
      <h3 style="text-align: center">{{ Preview.title }}</h3>
      <hr />
      <img
        style="max-width: 100%; margin: 10px 0"
        :src="'http://localhost:3000' + Preview.cover"
        alt=""
      />
      <hr />
      <span class="content" v-html="Preview.introduction"></span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script  setup>
import {
  compile,
  computed,
  onMounted,
  reactive,
  ref,
  watch,
  watchEffect,
} from "vue";
import { GetAllProduct, DeleteProduct } from "@/request/home/userapi.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "@/stores/counter.js";

const value1 = ref();
import {
  Bottom,
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import dayjs from "dayjs";
const Store = useStore();
const Preview = ref();
const NewaddVue = ref();
const dialogVisible = ref(false);
const EditVisible = ref(false);
const Editdata = ref();
const tableData = ref();
const Router = useRouter();
async function GetAll() {
  const result = await GetAllProduct();
  tableData.value = result.data.result;
}

function editTime(editTime) {
  const datatime = dayjs(editTime);
  return datatime.format("YYYY-MM-DD HH:mm:ss");
}

const action = () => {};

let Width = ref(50);

const isShowMenu = computed(() => Store.isShowMenu);
const isCollapse = computed(() => Store.isCollapse);
watchEffect(() => {
  Width.value = !isShowMenu.value ? 80 : isCollapse.value ? 60 : 40;
});

const Bottom1 = (value) => {
  Preview.value = value;
  dialogVisible.value = true;
};
const EditBottom = (value) => {
  Router.push({
    name: "ProductEdit",
    query: {
      data: JSON.stringify(value),
    },
  });
};
const ProductDelete = async (value) => {
  const result = await DeleteProduct(value);
  if (result.data.code === 400) {
    ElMessage({
      message: result.data.msg,
      type: "error",
    });
  } else {
    ElMessage({
      message: result.data.msg,
      type: "success",
    });
    GetAll();
  }
};
onMounted(() => {
  if (!isShowMenu.value) {
    Width.value = 80;
  }
  GetAll();
});
</script>
  
  <style scoped>
#div1 {
  width: 100%;
  background: black;
}
.box-card {
  width: 90%;
}

@media (max-width: 450px) {
  .div1 {
    font-size: 0.8rem;
  }
  .font {
    font-size: 0.2rem;
  }
}
:deep(.content) img {
  width: 100%;
}
</style>